<template>
  <a-card :bordered="false" :title="$route.meta.title" :bodyStyle="{ padding: '0 12px' }">
    <a-table row-key="id" size="middle" :scroll="scroll" :loading="loading" :columns="columns" :data-source="dataSource" :pagination="pagination" @change="tableChange">
      <a-form slot="title" :form="searchForm" @submit="searchSubmit" layout="inline">
        <sjht-channel-search-options />
        <a-form-item label="IP地址">
          <a-input allowClear :maxLength="15" placeholder="请输入IP地址" autocomplete="off" v-decorator="['ipAddress']" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" htmlType="submit">查询</a-button>
            <a-button htmlType="reset" @click="onReset">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
      <div slot="action" class="table-action" slot-scope="text,record,index">
        <a @click.stop="$refs.form.update(record)">修改</a>
        <a-divider type="vertical" />
        <a-popconfirm :title="`确定删除【${record.channelName}】的【${record.ipAddress}】吗？`" @confirm="onDelete(record.id,index)">
          <a class="delete">删除</a>
        </a-popconfirm>
      </div>
      <template slot="status" slot-scope="status,record">
        <a-switch :defaultChecked="Boolean(status)" checkedChildren="启用" unCheckedChildren="停用" @change="onChange(record.id,$event,'state')" />
      </template>
    </a-table>
    <sjht-ipwhite-form ref="form" @success="success" />
  </a-card>
</template>
<script>
import { SjhtChannelSearchOptions } from '@/components/channel'
import { PageIpwhitelist, UpdateIpwhitelist, DeleteIpwhitelist } from '@/api/manage/ipwhitelist'
import { table, tableMore, tableAction, searchForm } from '@/utils/mixins'
import SjhtIpwhiteForm from './modules/form'
export default {
  mixins: [table, tableMore, tableAction, searchForm],
  components: {
    [SjhtChannelSearchOptions.name]: SjhtChannelSearchOptions,
    [SjhtIpwhiteForm.name]: SjhtIpwhiteForm
  },
  data() {
    return {
      loadApi: PageIpwhitelist,
      deleteApi: DeleteIpwhitelist, //删除接口
      updateApi: UpdateIpwhitelist //修改接口
    }
  },
  created() {
    this.columns.unshift({ title: '操作', key: 'operation', width: 90, align: 'center', scopedSlots: { customRender: 'action' } })
    this.columns.push(
      { title: '渠道ID', dataIndex: 'appid', width: 150, ellipsis: true },
      { title: '渠道名称', dataIndex: 'channelName', width: 250, ellipsis: true },
      { title: 'IP地址', dataIndex: 'ipAddress', width: 120 },
      { title: '状态', dataIndex: 'state', width: 100, align: 'center', scopedSlots: { customRender: 'status' } },
      { title: '创建时间', dataIndex: 'createTime', width: 145 },
      { title: '备注', dataIndex: 'notes', width: 300, ellipsis: true }
    )
  },
  mounted() {
    this.loadData()
  },
  methods: {
    success(rec) {
      const obj = this.dataSource.find(f => f.id === rec.id)
      this.onSuccess(Object.assign({}, obj, rec))
    }
  }
}
</script>